<template>
  <div>
    <h1>自定义组件</h1>
    <!--简单自定义组件-->
    <div>
      <!--使用自定义组件：不传参数
      <Component1 />-->
      <!--使用自定义组件：传参数或动态参数
      <Component1 :text="msg" />-->
      <!--传递数值、对象、数组等-->
      <Component1 :text="msg" :num="num" :obj="obj" :list="list" />
    </div>
    <!--传参约束-->
    <div>
      <Component2 :text="msg" :num="num" />
    </div>
    <!--父子组件通信
    <Component3 :text="content" @contentSubmit="contentSubmit" />
    <p>content: {{content}}</p>-->
    <hr />
    <!-- 双向绑定：绑定到组件的一个属性,语法糖,相当于:
    @OnCallback="msg2=$event.target.value"
    -->
    <Component3 v-model="msg2" />
    <p>msg2: {{ msg2 }}</p>
    <hr />
    <!--组件插槽-->
    <Component4 :title="title">
      <!--没有传递slot的替换组件中没有命名的slot,给了slot名的则替换对应slot的位置-->
      <!--方式1：slot属性-->
      <!-- <span slot="left">左边插槽</span> -->
      <!--方式2：也可以按如下方式使用：传递参数“：”-->
      <template v-slot:left>
        <span>左边插槽1</span>
      </template>
      <span slot="right">右边插槽2</span>
    </Component4>
  </div>
</template>

<script>
import Component1 from "../components/Component1";
import Component2 from "../components/Component2";
import Component3 from "../components/Component3";
import Component4 from "../components/Component4";
export default {
  name: "component1",
  components: {
    Component1,
    Component2,
    Component3,
    Component4
  },
  data() {
    return {
      msg: "Hello World!",
      num: 120,
      obj: {
        a: "name",
        b: "lixx"
      },
      list: [1, 2, 3, 4],
      content: "默认值",
      msg2: "测试",
      title: "hello"
    };
  },
  methods: {
    contentSubmit(val) {
      console.log(val);
      this.content = val;
    }
  }
};
</script>
<style lang="stylus" scoped></style>
